<template>
  <div class="cc_list">
    <tab :line-width=2 active-color='#fc378c' v-model="index">
      <tab-item class="vux-center" v-for="item in list">{{item}}</tab-item>
    </tab>
    <swiper v-model="index" height="100%" class="list_wapper" :show-dots="false">
      <swiper-item v-for="item in list">
        <div class="tab-swiper vux-center">{{item}} Container</div>
        <panel :list="listcc" type="1"></panel>
      </swiper-item>
    </swiper>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Panel, Swiper, SwiperItem, Tab, TabItem } from 'vux';
  const list = () => ['精选商品', '优鲜水果', '馋嘴零食', '乳品饮料', '肉类禽蛋']

  export default{
    components: {Panel, Swiper, SwiperItem, Tab, TabItem},
    data() {
      return {
        index: 0,
        list: list(),
        listcc: [{
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题一',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: 'list/v/cell'
        }, {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: 'list/v/radio',
            replace: false
          }
        }]
      };
    }
  }
</script>

<style lang="less">
  .cc_list{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 50px;
  }
  .list_wapper{
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    width: 100%;
  }
</style>
